<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置">

        <Form :label-width="90">
          <UploadImageButton v-model="relativePath" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>
          <FormItem label="相对路径">
            <i-input size="small" v-model="relativePath" disabled>
              <Button slot="append" icon="md-close" @click="relativePath = ''"></Button>
            </i-input>
          </FormItem>
          <FormItem label="SVG宽度">
            <Input size="small" v-model="width"/>
          </FormItem>
          <FormItem label="SVG高度">
            <Input size="small" v-model="height"/>
          </FormItem>
          <FormItem label="颜色">
            <PnColorPicker size="small" v-model="color" alpha recommend/>
          </FormItem>
        </Form>

      </TabPane>
      <TabPane name="interaction_tab" tab="main_tabs" label="交互">
        <Container v-if="mainTabsValue == 'interaction_tab'">
          <CustomJsDocument></CustomJsDocument>
          <FormItemPanel title="初始化运行脚本">
            <CodeEditor v-model="customGlobalJsCode"></CodeEditor>
          </FormItemPanel>

          <MouseInteractionSender :mouseTypes="['click','mouseenter','mouseleave']"></MouseInteractionSender>
          <FormItemPanel title="鼠标单击时运行脚本">
            <CodeEditor v-model="clickHandleScript"></CodeEditor>
          </FormItemPanel>
        </Container>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'SvgIconCompForm', // 此名称必须填写，且必须与组件文件名相同，并且必须加上Form字符
    mixins: [FuncCompFormMixin],
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      ...mapFields({
        relativePath: 'component.compConfigData.relativePath',
        width: 'component.compConfigData.width',
        height: 'component.compConfigData.height',
        color: 'component.compConfigData.color',
        clickHandleScript: 'component.compConfigData.clickHandleScript',
        filter: 'component.compConfigData.filter',
      })
    },
    watch: {
      relativePath: {
        handler: function (val) {
          this.$EventBus.$emit('pn_reloadComponent', this.cacheId)
        }
      }
    }
  }
</script>

<style scoped>
  >>> .ivu-input-number-small {
    margin-top: -10px !important;
  }
</style>
